<template>
  <view class="bottom-actions">
    <!-- 左侧三个小按钮 -->
    <view class="left-actions">
      <view
        v-for="(item, index) in leftItems"
        :key="index"
        class="action-item"
        :class="{ 
          disabled: item.disabled || item.loading, 
          favorited: item.isFavorited,
          loading: item.loading 
        }"
        @tap="onTap(item, index)"
      >
        <view class="icon-container">
          <image 
            v-if="!item.loading"
            class="action-icon" 
            :src="getIconSrc(item)" 
            mode="aspectFit" 
          />
          <view v-else class="loading-spinner"></view>
          <!-- 收藏状态指示器 -->
          <view v-if="item.event === 'toggleFavorite' && item.isFavorited" class="favorite-indicator"></view>
        </view>
        <text class="action-text">{{ item.loading ? '处理中...' : item.title }}</text>
      </view>
    </view>
    
    <!-- 右侧大按钮 -->
    <view class="right-action">
      <view
        class="primary-button"
        :class="{ disabled: primaryItem.disabled }"
        @tap="onTap(primaryItem, 3)"
      >
        <image class="primary-icon" :src="primaryItem.icon" mode="aspectFit" />
        <text class="primary-text">{{ primaryItem.title }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'BottomActionButtons',
  props: {
    items: {
      type: Array,
      default: () => [
        {
          icon: '/static/assets/sourceInfo/source-bottom-location.png',
          title: '导航',
          event: 'openMap'
        },
        {
          icon: '/static/assets/sourceInfo/source-bottom-share.png',
          title: '海报',
          event: 'share'
        },
        {
          icon: '/static/assets/sourceInfo/source-bottom-favorite.png',
          title: '收藏',
          event: 'toggleFavorite'
        }
      ]
    },
    primaryItem: {
      type: Object,
      default: () => ({
        icon: '/static/assets/sourceInfo/source-bottom-phone.png',
        title: '联系客服',
        event: 'contactService'
      })
    }
  },
  computed: {
    leftItems() {
      return this.items.slice(0, 3);
    }
  },
  methods: {
    onTap(item, index) {
      console.log('=== BottomActionButtons onTap ===');
      console.log('点击的按钮:', item);
      console.log('按钮索引:', index);
      
      // 如果是收藏按钮，需要特殊处理
      if (item.event === 'toggleFavorite') {
        console.log('检测到收藏按钮点击');
        console.log('当前收藏状态:', item.isFavorited);
        console.log('仓库ID:', item.warehouseId);
        
        // 触发收藏状态变化事件
        const payload = {
          warehouseId: item.warehouseId,
          isFavorited: !item.isFavorited, // 传递将要切换到的状态
          item,
          index
        };
        
        console.log('触发toggleFavorite事件，payload:', payload);
        this.$emit('toggleFavorite', payload);
        return; // 收藏按钮不触发其他事件
      }
      
      console.log('触发通用action事件');
      // 触发通用action事件
      this.$emit('action', { item, index });
      
      // 触发对应的事件
      if (item && item.event) {
        console.log('触发对应事件:', item.event);
        this.$emit(item.event, { item, index });
      }
    },
    getIconSrc(item) {
      // 如果是收藏按钮，根据收藏状态返回不同图标
      if (item.event === 'toggleFavorite' || item.event === 'favorite') {
        // 使用现有的收藏图标，激活状态时使用 me-favorite.png
        return item.isFavorited 
          ? '/static/assets/sourceInfo/source-bottom-favorite.png' 
          : '/static/assets/sourceInfo/source-bottom-favorite.png';
      }
      return item.icon;
    }
  }
}
</script>

<style scoped>
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  padding: 24rpx 20rpx;
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 24rpx;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
  z-index: 1000;
  border-top: 1rpx solid #f0f0f0;
}

.left-actions {
  display: flex;
  gap: 60rpx;
  flex: 1;
  justify-content: center;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
  position: relative;
}

.action-item.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.action-item.favorited .action-text {
  color: #C02C38;
  font-weight: 600;
}

.action-item.loading .action-text {
  color: #999;
}

.loading-spinner {
  width: 44rpx;
  height: 44rpx;
  border: 3rpx solid #f0f0f0;
  border-top: 3rpx solid #C02C38;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.icon-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-icon {
  width: 44rpx;
  height: 44rpx;
  opacity: 0.8;
}

.favorite-indicator {
  position: absolute;
  top: -4rpx;
  right: -4rpx;
  width: 16rpx;
  height: 16rpx;
  background: #C02C38;
  border-radius: 50%;
  border: 2rpx solid #ffffff;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.action-text {
  font-size: 22rpx;
  color: #666;
  font-weight: 400;
}

.right-action {
  flex-shrink: 0;
}

.primary-button {
  background: #C02C38;
  border-radius: 50rpx;
  padding: 24rpx 48rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;
  min-width: 220rpx;
  justify-content: center;
  box-shadow: 0 8rpx 20rpx rgba(192, 44, 56, 0.3);
}

.primary-button.disabled {
  background: #ccc;
  box-shadow: none;
  opacity: 0.6;
  pointer-events: none;
}

.primary-icon {
  width: 36rpx;
  height: 36rpx;
}

.primary-text {
  color: #ffffff;
  font-size: 30rpx;
  font-weight: 600;
}
</style> 